// 统一注册所有的全局组件
import { App } from 'vue'
import XtxSkeleton from '@/components/skeleton/index.vue'
import XtxCarousel from '@/components/carousel/index.vue'
import XtxMore from '@/components/more/index.vue'
import XtxBread from '@/components/bread/index.vue'
import XtxBreadItem from '@/components/bread/item.vue'
import XtxCity from '@/components/city/index.vue'
import XtxNumbox from '@/components/numbox/index.vue'
import XtxButton from '@/components/button/index.vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'

export default {
    install(app: App) {
        app.component('XtxSkeleton', XtxSkeleton)
        app.component('XtxCarousel', XtxCarousel)
        app.component('XtxMore', XtxMore)
        app.component('XtxBread', XtxBread)
        app.component('XtxBreadItem', XtxBreadItem)
        app.component('XtxCity', XtxCity)
        app.component('XtxNumbox', XtxNumbox)
        app.component('XtxButton', XtxButton)

        app.directive('lazy', {
            mounted(el: HTMLImageElement, binding) {
                const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
                    // 当前元素在可视区
                    if (isIntersecting) {
                        el.src = binding.value
                        // 停止监听
                        stop()

                        el.onerror = function () {
                            el.src = defaultImg
                        }
                    }
                })
            }
        })
    }
}